<template>
    <div class="index">
        <!--优质内容推荐 -->
        <Carousel autoplay v-model="RecommendNum" loop class="banner">
            <CarouselItem  v-for="pa in pages">
                <div class="demo-carousel topbt"><a class="topbt" target="_blank" :href="'/page/' + pa.id">{{pa.title}}</a></div>
            </CarouselItem>
        </Carousel>
        <!--        主页内容-->
        <Col class="content">
            <Col span="12">
                <Row class="plate">
                    <Row v-for="c in categories">
                        <Col span="24"><h1 class="Cname">{{c.name}}</h1>
                            <Col span="8" v-for="p in c.plates">
                                <Row class="Q_A" >
                                    <h3>
                                        <Icon type="md-checkmark-circle-outline" size="24"/>
                                        <a class="platea" :href="'/plate/' + p.id">{{p.name}}</a>
                                    </h3>
                                </Row>
                            </Col>
                        </Col>
                    </Row>
                </Row>

            </Col>


            <Col span="12">
                <Row class="notice" >
                    <!--                    公告区域-->
                    <Col span="24" >
                        <Carousel v-model="NoticeNum" loop class="notice_body" autoplay>
                            <CarouselItem v-for="n in noticePage.records">
                                <div class="demo-carousel">{{n.title}}</div>
                                <div v-html="">{{n.message}}</div>
                            </CarouselItem>

                        </Carousel>
                    </Col>
                    <!--                    留言区域-->
                    <Col span="24">
                        <Row class="message">
                            <ul>
                                <li v-for="r in remarks.records">
                                    <h3><Icon type="logo-freebsd-devil" size="20"/>FTL:</h3>
                                    <div v-html="">{{r.content}}</div>
                                </li>
                            </ul>
                            <Col span="24">
                                <h2>请输入你的留言：</h2>
                                <textarea cols="80px" rows="5px"></textarea>
                            </Col>
                            <Col>
                                <button id="comments">留言</button>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Col>
        </Col>
    </div>

</template>

<script>

    import {mapActions} from 'vuex'
    import category from "../store/api/category";
    import notice from "../store/api/notice";
    import plate from "../store/api/plate";


    export default {
        data:function() {
            return {
                categories:[],
                noticePage:[],
                remarks:[],
                users:[],
                pages:[],
                RecommendNum: 0,
                NoticeNum:0,
                setting: {
                    autoplay: false,
                    autoplaySpeed: 2000,
                    dots: 'inside',
                    radiusDot: false,
                    trigger: 'click',
                    arrow: 'hover',
                }
            }
        },
        methods: {
            ...mapActions("category",["getAllCategory"]),
            ...mapActions("notice",["getAllNotice"]),
            ...mapActions("plate",["getAllPlate"]),
            ...mapActions("page",["getAllPage"]),
            ...mapActions("remark",["getAllRemark"]),

        },
        getPages: function (page = 1, size = 5) {
            this.getAllPage({
                page, size,
                callback: pages => {
                    alert(0)
                    this.pages = pages;
                }
            });
        },
        created: function () {

            this.getAllCategory({
                callback:(category) => {
                    this.categories = category;
                    this.categories.forEach(c =>{
                        this.getAllPlate({
                            categoryId: c.id,
                            callback:(plates) => {
                                this.$set(c,"plates",plates.records)
                            }
                        })
                    })
                }
            })

            this.getAllNotice({
                callback:(noticePage) => {
                    this.noticePage = noticePage;
                }
            })

            this.getAllRemark({
                callback:(remarks) => {
                    this.remarks = remarks.remarks;
                }
            })

            this.getAllPage({
                page:1, size:5,
                callback: (pages) => {
                    this.pages = pages.records;
                }
            });
        }
    }

</script>

<style scoped>
    .Cname{
        margin-top: 10px;
    }
    .banner{
        height: 400px;
        background-color:#55c291;
        font-size: 30px;
    }
    .demo-carousel{
        text-align: center;
    }
    .content{
        margin-top: 80px;
        text-align: left;
    }

    .plate a{
        color: #000000;
    }
    .plate ol{
        text-indent: 2em;
        list-style: none;
    }
    .plate ol li{
        padding: 10px;
    }
    .Q_A{
        margin-top: 10px;
        background-color: aquamarine;
    }
    .Q_A h3{
        padding-top: 30px;
        padding-bottom: 30px;
        border: 2px solid #d9d9d9;
    }
    .technology{
        margin-top: 30px;
        background-color: cadetblue;
    }
    .technology h3{
        padding-top: 30px;
    }
    .discuss{
        background-color: #f19149;
        margin-top: 30px;
    }
    .discuss h3{
        padding-top: 30px;
    }
    #C{
        margin-top: 30px;
    }
    .notice_body{
        width: 80%;
        margin: 0 auto;
        height: 150px;
        font-size: 24px;
    }
    .message{
        width: 80%;
        margin: 0 auto;
        margin-top: 50px;
    }
    .message ul{
        list-style: none;
    }
    .message ul li{
        height: 60px;
    }
    .message ul li span{
        display: inline-block;
        text-indent: 3em;
    }
    #comments{
        padding: 5px 20px;
        background-color: #42b983;
        outline: unset;
    }
    .topbt{
        text-align:center;
        color: #2c3e50;
        padding-top: 170px;
        padding-left: 30px;
    }
    .topbt:hover{
        color: #8c888b;
        background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
        color: transparent;
        /*设置字体颜色透明*/
        -webkit-background-clip: text;
        /*背景裁剪为文本形式*/
    }
    .platea:hover{
       color: #fdefac;
    }
</style>